import { useEffect, useState } from "react";
import { Button } from "antd";
import { useNavigate, useParams } from "react-router-dom";
import {
  selectHeroInfo,
  selectIsLoading,
  selectError,
  getPeopleInfoById,
  getInfoByUrlThunk,
  heroesActions,
} from "@/entities/heroes/model/heroes";
import { map, mergeAll, mergeRight } from "ramda";
import { Hero } from "@/shared/typicode/models";

import { useDispatch, useSelector } from "react-redux";
import { AppDispatch } from "@/shared/typicode/heroes";

import "./styles.sass";

const HeroInfoPage = () => {
  // * @state
  const [heroInfo, setHeroInfo] = useState<Hero | null>(null);

  // * @selectors
  /** Список героев */
  const heroInfoDef = useSelector(selectHeroInfo);
  const isLoadind = useSelector(selectIsLoading);
  const error = useSelector(selectError);

  // * @actions
  const dispatch = useDispatch<AppDispatch>();

  const navigate = useNavigate();
  const { heroId } = useParams();

  const handleClick = () => {
    navigate("/");
  };

  useEffect(() => {
    if (heroId) {
      dispatch(getPeopleInfoById({ heroId: heroId }));
    }
  }, [heroId]);

  useEffect(() => {
    if (heroInfoDef) {
      const urlFields = ["homeworld", "films", "species", "starships", "vehicles"];
      const r = mergeAll(map(url => ({ [url]: getInfoByUrlThunk(heroInfoDef[url]) }), urlFields));
      setTimeout(() => {
        setHeroInfo(mergeRight(heroInfoDef, r));
      }, 2000);
    }
  }, [heroInfoDef]);

  useEffect(() => {
    return () => {
      dispatch(heroesActions["removeHeroInfo"]());
    };
  }, []);

  if (error) {
    throw new Response("Not Found", { status: 404 });
  }

  if (isLoadind || !heroInfo) {
    return <div className="hero-info-container">Loading...</div>;
  }

  return (
    <div className="hero-info-container">
      <div className="hero-info-container-back">
        <Button onClick={handleClick} type="primary" style={{ background: "#ffe81f", color: "black" }}>
          На главную
        </Button>
        <div className="name">{heroInfo.name}</div>
      </div>
      <div className="hero-info-container-body">
        <div className="field">
          <div className="title">День рождения</div>
          <div className="value">{heroInfo.birth_year}</div>
        </div>
        <div className="field">
          <div className="title">Цвет глаз</div>
          <div className="value">{heroInfo.eye_color}</div>
        </div>
        <div className="field">
          <div className="title">Цвет волос</div>
          <div className="value">{heroInfo.hair_color}</div>
        </div>
        <div className="field">
          <div className="title">Пол</div>
          <div className="value">{heroInfo.gender}</div>
        </div>
        <div className="field">
          <div className="title">Рост</div>
          <div className="value">{heroInfo.height}</div>
        </div>
        <div className="field">
          <div className="title">Вес</div>
          <div className="value">{heroInfo.mass}</div>
        </div>
        <div className="field">
          <div className="title">Цвет кожи</div>
          <div className="value">{heroInfo.skin_color}</div>
        </div>
        <div className="field">
          <div className="title">Место рождения</div>
          <div className="value">{heroInfo.homeworld}</div>
        </div>
        <div className="field">
          <div className="title">Фильмы</div>
          <div className="value">{heroInfo.films.join(", ")}</div>
        </div>
        <div className="field">
          <div className="title">Вид</div>
          <div className="value">{heroInfo.species.join(", ")}</div>
        </div>
        <div className="field">
          <div className="title">Звездолеты</div>
          <div className="value">{heroInfo.starships.join(", ")}</div>
        </div>
        <div className="field">
          <div className="title">Транспортные средства</div>
          <div className="value">{heroInfo.vehicles.join(", ")}</div>
        </div>
      </div>
    </div>
  );
};

export { HeroInfoPage };
